<template>
  <div class="custom">
    <!-- <header>
      <el-input v-model="searchkey" style="width: 300px" placeholder="请输入类目名称搜索" clearable @change="getList">
        <template #prefix>
          <el-icon class="el-input__icon"><search /></el-icon>
        </template>
      </el-input>
    </header> -->
    <div class="table-wrapper">
      <el-table :data="tableData" style="width: 100%" row-key="categoryId" border :default-expand-all="false">
        <el-table-column prop="name" label="分类名称" width="200" />
        <el-table-column prop="preview" label="分类预览" :align="'center'" :header-align="'center'" />
        <el-table-column prop="actin" label="选择" width="160" :align="'center'" :header-align="'center'">
          <template #default="scope">
            <div class="btn-wrap">
              <div>
                <el-checkbox
                  v-model="scope.row.selectValue"
                  size="large"
                  v-if="scope.row.fomart ? scope.row.children.length == 0 : false"
                  @click="changeSelect(scope.row)"
                />
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dialog-footer">
      <el-button type="primary" @click="sure">确认</el-button>
      <el-button @click="close">取消</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import useClassifyStore from "@/store/modules/classify";
const classifyStore = useClassifyStore();
const searchkey = ref("");
const tableData = ref([]);
const selectRows = ref([]);
const emit = defineEmits(["sumbit", "close"]);

// 查询list
const getList = async () => {
  const list = await classifyStore.getList({ searchkey: searchkey.value });
  tableData.value = list;
};
//选中分类
const changeSelect = e => {
  const isHave = selectRows.value.findIndex(item => item.categoryId === e.categoryId);
  if (isHave !== -1) {
    selectRows.value.splice(isHave, 1);
  } else {
    selectRows.value.push(e);
  }
};
//分类确定
const sure = () => {
  emit("submit", selectRows.value);
};

//分类确定
const close = () => {
  emit("close");
};
getList();
</script>

<style lang="scss" scoped>
h1,
p {
  padding: 0;
  margin: 0;
}
.custom {
  max-height: 700px;
  overflow-y: auto;
  position: relative;
  display: flex;
  flex-direction: column; /* 使用列方向 */
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  flex: 1; /* 使表格区域填充可用空间 */
  overflow-y: auto; /* 允许表格区域滚动 */
}

.btn-wrap {
  display: flex;
  justify-content: center;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  padding: 10px; /* 增加一点内边距 */
}
:deep(.el-table thead th) {
  position: sticky;
  position: -webkit-sticky; /* 为了兼容 Safari */
  top: 0;
  background-color: white;
  z-index: 10;
}
</style>
